<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - Layui</title>
    <link rel="stylesheet" href="/assets/lib/layui-2.8/css/layui.css">
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="layui-container">
        <div class="layui-progress" style="margin: 15px 0 30px;">
            <div class="layui-progress-bar" lay-percent="100%"></div>
        </div>
        <div class="layui-btn-container">
            <button class="layui-btn" test-active="test-form">一个按钮</button>
            <button class="layui-btn layui-btn-normal" id="test2">当前日期</button>
        </div>

        <blockquote class="layui-elem-quote" style="margin-top: 30px;">
            <div class="layui-text">
                <ul>
                    <li>您当前预览的是：<span>Layui-v<span id="version"></span></span></li>
                    <li>Layui 是一套开源免费的 Web UI（界面）组件库。这是一个极其简洁的演示页面</li>
                </ul>
            </div>
        </blockquote>

        <div class="box"></div>

        <div class="layui-form">
            <input type="text" name="" placeholder="文本框" class="layui-input">
            <hr class="ws-space-16">
            <textarea id="textarea" name="" placeholder="多行文本框" class="layui-textarea"></textarea>
        </div>
        <button id="button1" class="layui-btn">按钮</button>
    </div>

    <script src="/assets/lib/layui-2.8/layui.js"></script>
    <script>
        layui.use(function () {
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;
            var util = layui.util;
            var $ = layui.$;

            // 欢迎信息
            layer.msg('Hello World', { icon: 6 });

            // 输出版本号
            lay('#version').html(layui.v);

            // 日期
            laydate.render({
                elem: '#test2',
                value: new Date(),
                isInitValue: true
            });

            // 触发事件
            util.on('test-active', {
                'test-form': function () {
                    layer.open({
                        type: 1,
                        resize: false,
                        shadeClose: true,
                        area: '350px',
                        title: 'layer + form',
                        content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">',
                            '<li class="layui-form-item">',
                            '<label class="layui-form-label">输入框</label>',
                            '<div class="layui-input-block">',
                            '<input class="layui-input" lay-verify="required" name="field1">',
                            '<textarea class="layui-textarea" lay-verify="required" name="field3"></textarea>',
                            '</div>',
                            '</li>',
                            '<li class="layui-form-item">',
                            '<label class="layui-form-label">选择框</label>',
                            '<div class="layui-input-block">',
                            '<select name="field2">',
                            '<option value="A">A</option>',
                            '<option value="B">B</option>',
                            '<select>',
                            '</div>',
                            '</li>',
                            '<li class="layui-form-item" style="text-align:center;">',
                            '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>',
                            '</li>',
                            '</ul>'].join(''),
                        success: function (layero, index) {
                            layero.find('.layui-layer-content').css('overflow', 'visible');

                            form.render().on('submit(*)', function (data) {
                                var field = data.field;

                                // 显示填写的表单
                                layer.msg(util.escape(JSON.stringify(field)), {
                                    icon: 1
                                });
                                // layer.close(index); //关闭层
                            });
                        }
                    });
                }
            });


            const ele = document.getElementsByClassName('box')[0]
            console.log(ele)
            console.log(layui.getStyle)
            console.log(layui.getStyle(ele, 'height'))
            var style = window.getComputedStyle(ele, null)
            console.log(style.getPropertyValue('height'))

            $('#button1').click(function () {
                var a = JSON.stringify($('#textarea').val())
                console.log(a)
                var b = a.replaceAll('\\n', '%0A')
                console.log(b)
            })

        });
    </script>
</body>

</html>